<template>
  <div class="body">
    <span class="title"><h3>{{keywords}}</h3> 的相关搜索如下 :</span>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="综合" name="all"><SearchAll :keywords="keywords" @changeTab="changeTab" /></el-tab-pane>
      <el-tab-pane label="单曲" name="song"><SearchSongs :keywords="keywords" :changeTab="changeTab"/></el-tab-pane>
      <el-tab-pane label="歌单" name="playlist">歌单</el-tab-pane>
      <el-tab-pane label="歌手" name="singer">歌手</el-tab-pane>
      <el-tab-pane label="专辑" name="album">专辑</el-tab-pane>
      <el-tab-pane label="歌词" name="lyric">歌词</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts" name="SearchIndex">
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import SearchAll from "./SearchAll.vue";
import SearchSongs from "./SearchSongs.vue";

const router = useRoute();
let keywords = computed(()=>{
  return String(router.query.keywords || '');
})

let activeName = ref('all')

function changeTab(tab:string){
  activeName.value = tab
}
</script>
<style scoped lang="scss">
.body{
  margin: 0 20px 0 20px;
  .title{
    color: var(--el-text-color-secondary);
    font-size: 12px;
    h3{
      display: inline;
      font-size: 20px;
      color: var(--el-text-color-primary);
    }
  }
  .demo-tabs{
    margin-top: 10px;
    :deep(.el-tabs__nav-scroll .el-tabs__item){
      font-size: 18px;
    }
  }
}
</style>
